<script setup lang="ts">
import { ref, watch } from "vue";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import ReCol from "@/components/ReCol";
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    title: "申请",
    dispatchDate: "",
    goodsDest: "",
    principal: "",
    phone: "",
    remarks: "",
    goodsList: "",
    vehicleList: "",
    storageOrderId: "",
    dispatchOrderId: ""
  })
});
const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}
defineExpose({ getRef });

//订单表格
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import AddFill from "@iconify-icons/ep/plus";
import Delete from "@iconify-icons/ep/delete";
import Empty from "./utils/empty.svg?component";
import { useColumns } from "./utils/columns";
const { columns, dataList, onAdd, onDel } = useColumns();
watch(
  () => dataList.value,
  newValue => {
    newFormInline.value.goodsList = newValue;
  },
  { deep: true, immediate: true }
);
const timeLineArr = ref([]);
//车辆表格
import { useVehicleColumns } from "./utils/vehicleColumns";
const { vehicleColumns, vehicleList, vehicleOnAdd, vehicleOnDel, selectValue } =
  useVehicleColumns(timeLineArr);
//车辆选择
import { useVehicleSelectColumns } from "./utils/selectVehicleColumns";

const vehicleSelectRef = ref();
const {
  vehicleSelectColumns,
  vehicleSelectPagination,
  vehicleSelectDataList,
  vehicleSelectRowStyle,
  vehicleSelectOnRowClick
} = useVehicleSelectColumns(
  vehicleSelectRef,
  selectValue.value,
  vehicleList.value
);
watch(
  () => vehicleList.value,
  newValue => {
    newFormInline.value.vehicleList = newValue;
  },
  { deep: true, immediate: true }
);
import { getCarTimeLineApi } from "@/api/carApi";
import { message } from "@/utils/message";

function getTimeLine(date) {
  getCarTimeLineApi({ date: date })
    .then(res => {
      timeLineArr.value = res.result;
    })
    .catch(error => {
      message(error.response.data.msg ?? "操作失败,请联系管理员", {
        type: "error"
      });
    });
}
const disabledDate = (time: Date) => {
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  return today > time;
};
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="auto"
  >
    <el-row :gutter="30">
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="发货日期" prop="dispatchDate">
          <el-date-picker
            v-model="newFormInline.dispatchDate"
            type="date"
            class="!w-[160px]"
            placeholder="请选择日期"
            value-format="YYYY-MM-DD"
            :disabled-date="disabledDate"
            @change="getTimeLine(newFormInline.dispatchDate)"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="货物目的地" prop="goodsDest">
          <el-input
            v-model="newFormInline.goodsDest"
            clearable
            placeholder="请输入货物目的地"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="订单负责人" prop="principal">
          <el-input
            v-model="newFormInline.principal"
            clearable
            placeholder="请输入订单负责人"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="负责人电话" prop="phone">
          <el-input
            v-model="newFormInline.phone"
            clearable
            placeholder="请输入手机号"
          />
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="发货备注" prop="remarks">
          <el-input
            v-model="newFormInline.remarks"
            clearable
            placeholder="请输入发货备注"
          />
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="商品信息" prop="goodsList">
          <pure-table
            row-key="id"
            align-whole="center"
            :header-cell-style="{
              background: 'var(--el-fill-color-light)',
              color: 'var(--el-text-color-primary)'
            }"
            :data="dataList"
            :columns="columns"
          >
            <template #empty>
              <Empty fill="var(--el-svg-monochrome-grey)" class="m-auto" />
            </template>
            <template #append>
              <el-button
                plain
                class="w-full my-2"
                :icon="useRenderIcon(AddFill)"
                @click="onAdd"
              >
                添加一行数据
              </el-button>
            </template>
            <template #operation="{ row }">
              <el-button
                class="reset-margin"
                link
                type="primary"
                :icon="useRenderIcon(Delete)"
                @click="onDel(row)"
              />
            </template>
          </pure-table>
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="车辆信息" prop="vehicleList">
          <pure-table
            row-key="did"
            align-whole="center"
            :header-cell-style="{
              background: 'var(--el-fill-color-light)',
              color: 'var(--el-text-color-primary)'
            }"
            :data="vehicleList"
            :columns="vehicleColumns"
          >
            <template #empty>
              <Empty fill="var(--el-svg-monochrome-grey)" class="m-auto" />
            </template>
            <template #append>
              <el-button
                plain
                class="w-full my-2"
                :icon="useRenderIcon(AddFill)"
                @click="vehicleOnAdd"
              >
                添加一行数据
              </el-button>
            </template>
            <template #vehicle="scope">
              <el-select
                ref="vehicleSelectRef"
                v-model="selectValue[scope.row.did - 1].vehicleSelectValue"
                class="!w-[240px]"
                placeholder="请选择"
                value-key="id"
                clearable
              >
                <template #empty>
                  <div class="m-4">
                    <pure-table
                      row-key="id"
                      alignWhole="center"
                      :header-cell-style="{
                        background: 'var(--el-fill-color-light)',
                        color: 'var(--el-text-color-primary)'
                      }"
                      :row-style="vehicleSelectRowStyle"
                      :pagination="vehicleSelectPagination"
                      :data="vehicleSelectDataList"
                      :columns="vehicleSelectColumns"
                      @row-click="
                        (row, column, event) => {
                          vehicleSelectOnRowClick(
                            row,
                            column,
                            event,
                            scope.row.did
                          );
                        }
                      "
                    />
                  </div>
                </template>
              </el-select>
            </template>
            <template #operation="{ row }">
              <el-button
                class="reset-margin"
                link
                type="primary"
                :icon="useRenderIcon(Delete)"
                @click="vehicleOnDel(row)"
              />
            </template>
          </pure-table>
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>
<style scoped></style>
